style: Update panel styles to use appropriately contrasty text color

- new always light fg color definition
- update panel button style to use new fg color
- fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7270

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3063>

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 5a8d6525f149de4966e7185601eed822de94b245..3b66310b76deabac526dd136c609a66fe11624dd 100644 (file)
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -5,14 +5,14 @@
 
 $is_highcontrast:false;
 
-// base color for light theme
-$_dark_base_color: desaturate($dark_4, 100%);
+$_dark_base_color: desaturate($dark_4, 100%); // dark base color that is desaturated
+$_light_fg_color: $light_1; // always light (white) fg color
 
 $base_color: if($variant == 'light', $light_1, $_dark_base_color);
 $bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
-$fg_color: if($variant == 'light', $_dark_base_color, white);
+$fg_color: if($variant == 'light', $_dark_base_color, $_light_fg_color);
 
-$selected_fg_color: $light_1;
+$selected_fg_color: $_light_fg_color;
 $selected_bg_color: $blue_3;
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
 
@@ -28,7 +28,7 @@ $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
 // color definitions for OSD elements
-$osd_fg_color: $light_1;
+$osd_fg_color: $_light_fg_color;
 $osd_bg_color: lighten($_dark_base_color, 5%);
 
 // derived osd colors

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index ed087f7d8641d2fca49f35666025819fd99fe1d9..786d3cd23d19e7a83c774704d1f6f595c00901d1 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -5,11 +5,13 @@
 
 $is_highcontrast:true;
 
+$_light_fg_color: $light_1; // always light (white) fg color
+
 $base_color: if($variant == 'light', $light_1, $dark_5);
 $bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
 $fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
 
-$selected_fg_color: $light_1;
+$selected_fg_color: $_light_fg_color;
 $selected_bg_color: $blue_3;
 $selected_borders_color: darken($selected_bg_color, 20%);
 
@@ -25,7 +27,7 @@ $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
 // color definitions for OSD elements
-$osd_fg_color: $light_1;
+$osd_fg_color: $_light_fg_color;
 $osd_bg_color: $base_color;
 
 // derived osd colors

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 7d7fcb0875683ef7691b76008967785cdb675c66..eb6715e988edd56368bf0c1dc27f56ca913a6263 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,13 +1,15 @@
 /* Top Bar */
 // a.k.a. the panel
 
-$privacy_indicator_color: $orange_3;
+$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
 
 $panel_bg_color: if($variant == 'light', $light_3, $dark_5);
-$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
+$panel_fg_color: $fg_color;
 $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
 
-$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
+$transparent_panel_fg_color: $_light_fg_color; // always use brightest text for transparent panels
+$system_panel_fg_color: $system_fg_color; // always use system text color for overview
+
 $panel_height: 2.2em;
 $panel_transition_duration: 250ms; // same as the overview transition duration
 
@@ -17,7 +19,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   height: $panel_height;
   @extend %numeric;
   transition-duration: $panel_transition_duration;
-  box-shadow: inset 0 -1px 0 0  $panel_border_color;
+  box-shadow: inset 0 -1px 0 0 $panel_border_color;
 
   // panel menus
   .panel-button {
@@ -75,11 +77,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     }
 
     &.screen-recording-indicator {
-      @include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false);
+      @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false);
     }
 
     &.screen-sharing-indicator {
-      @include panel_button($privacy_indicator_color, $flat: false);
+      @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false);
     }
 
     // clock
@@ -99,32 +101,50 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
     }
   }
 
-  // transparent panel on lock & login screens
+  // transparent panel on overview, lock & login screens
+  &:overview,
   &.unlock-screen,
-  &.login-screen,
-  &:overview {
+  &.login-screen {
     background-color: transparent;
     box-shadow: none;
 
+    // unfortunate duplication to keep indicator style in these states
     .panel-button {
-      @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
+      &.screen-recording-indicator {
+        @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false);
+      }
 
-      &#panelActivities .workspace-dot {
-        background-color: $panel_system_fg_color;
+      &.screen-sharing-indicator {
+        @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false);
       }
+    }
+  }
+
+  // use transparent text styles for lock & login screen panels
+  &.unlock-screen,
+  &.login-screen {
+    .panel-button {
+      @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color);
 
       // clock
       &.clock-display {
-        @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
+        @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock");
       }
+    }
+  }
 
-      // unfortunate duplication so these indicators have styles
-      &.screen-recording-indicator {
-        @include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false);
+  // use system text styles for overview panel
+  &:overview {
+    .panel-button {
+      @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color);
+
+      &#panelActivities .workspace-dot {
+        background-color: $system_panel_fg_color;
       }
 
-      &.screen-sharing-indicator {
-        @include panel_button($privacy_indicator_color, $flat: false);
+      // clock
+      &.clock-display {
+        @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock");
       }
     }
   }